<template>
  <div class="order-management">
    <div class="page-header">
      <h1>订单管理</h1>
      <button class="btn btn-primary" @click="showCreateModal = true">
        <i class="icon-plus"></i>
        新增订单
      </button>
    </div>

    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <div class="search-form">
        <div class="form-group">
          <label>订单号</label>
          <input v-model="searchParams.Order_number" type="text" placeholder="请输入订单号" class="form-control" />
        </div>
        <div class="form-group">
          <label>商品名称</label>
          <input v-model="searchParams.Item_name" type="text" placeholder="请输入商品名称" class="form-control" />
        </div>
        <div class="form-actions">
          <button class="btn btn-primary" @click="searchOrders">搜索</button>
          <button class="btn btn-secondary" @click="resetSearch">重置</button>
          <!-- <button class="btn btn-success" @click="showExportModal = true">
            <i class="icon-export"></i>
            导出订单
          </button> -->
        </div>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="table-section">
      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th>订单号</th>
              <th>商品名称</th>
              <th>数量</th>
              <th>总重量(kg)</th>
              <th>总体积(cm³)</th>
              <th>包装类型</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in orders" :key="order.id">
              <td>{{ order.order_number }}</td>
              <td>{{ order.item_name }}</td>
              <td>{{ order.quantity }}</td>
              <td>{{ order.total_weight }}</td>
              <td>{{ order.total_volume.toLocaleString() }}</td>
              <td>{{ order.packaging_type }}</td>
              <td>{{ formatDate(order.createdAt) }}</td>
              <td class="actions">
                <button class="btn btn-sm btn-info" @click="viewOrder(order)">查看</button>
                <button class="btn btn-sm btn-warning" @click="editOrder(order)">编辑</button>
                <button class="btn btn-sm btn-danger" @click="deleteOrder(order)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="pagination-section">
        <div class="pagination-info">
          <span>共 {{ pagination.totalCount }} 条记录，第 {{ pagination.PageIndex }} / {{ pagination.totalPage }} 页</span>
          <div class="page-size-selector">
            <label>每页显示：</label>
            <select v-model="searchParams.PageSize" @change="changePageSize" class="form-control page-size-select">
              <option value="5">5条</option>
              <option value="10">10条</option>
              <option value="20">20条</option>
              <option value="50">50条</option>
              <option value="100">100条</option>
            </select>
          </div>
        </div>
        <div class="pagination-controls">
          <button class="btn btn-sm" :disabled="pagination.PageIndex <= 1"
            @click="changePage(pagination.PageIndex - 1)">
            上一页
          </button>
          <span class="page-numbers">
            <button v-for="page in getPageNumbers()" :key="page"
              :class="['btn', 'btn-sm', { 'btn-primary': page === pagination.PageIndex }]" @click="changePage(page)">
              {{ page }}
            </button>
          </span>
          <button class="btn btn-sm" :disabled="pagination.PageIndex >= pagination.totalPage"
            @click="changePage(pagination.PageIndex + 1)">
            下一页
          </button>
        </div>
      </div>
    </div>

    <!-- 创建/编辑订单模态框 -->
    <div v-if="showCreateModal || showEditModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ showCreateModal ? '新增订单' : '编辑订单' }}</h3>
          <button class="modal-close" @click="closeModal">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="submitOrder">
            <div class="form-row">
              <div class="form-group">
                <label>订单号 *</label>
                <input v-model="orderForm.order_number" type="text" required class="form-control" />
              </div>
              <div class="form-group">
                <label>商品名称 *</label>
                <input v-model="orderForm.item_name" type="text" required class="form-control" />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label>数量 *</label>
                <input v-model="orderForm.quantity" type="number" required class="form-control" />
              </div>
              <div class="form-group">
                <label>总重量(kg) *</label>
                <input v-model="orderForm.total_weight" type="number" step="0.01" required class="form-control" />
              </div>
              <div class="form-group">
                <label>总体积(cm³) *</label>
                <input v-model="orderForm.total_volume" type="number" required class="form-control" />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label>单体长度(cm)</label>
                <input v-model="orderForm.unit_length" type="number" class="form-control" />
              </div>
              <div class="form-group">
                <label>单体宽度(cm)</label>
                <input v-model="orderForm.unit_width" type="number" class="form-control" />
              </div>
              <div class="form-group">
                <label>单体高度(cm)</label>
                <input v-model="orderForm.unit_height" type="number" class="form-control" />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label>包装类型 *</label>
                <input v-model="orderForm.packaging_type" type="text" required class="form-control" />
              </div>
              <div class="form-group">
                <label>温度控制</label>
                <input v-model="orderForm.temperature_control" type="text" class="form-control" />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label>
                  <input v-model="orderForm.is_fragile" type="checkbox" />
                  易碎品
                </label>
              </div>
              <div class="form-group">
                <label>
                  <input v-model="orderForm.is_hazardous" type="checkbox" />
                  危险品
                </label>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label>备注</label>
                <textarea v-model="orderForm.notes" class="form-control" rows="3"></textarea>
              </div>
            </div>


            <div class="modal-actions">
              <button type="button" class="btn btn-secondary" @click="closeModal">取消</button>
              <button type="submit" class="btn btn-primary">{{ showCreateModal ? '创建' : '更新' }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 查看订单详情模态框 -->
    <div v-if="showViewModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>订单详情</h3>
          <button class="modal-close" @click="closeModal">&times;</button>
        </div>
        <div class="modal-body">
          <div v-if="selectedOrder" class="order-details">
            <div class="detail-section">
              <h4>基本信息</h4>
              <div class="detail-row">
                <span class="label">订单号：</span>
                <span class="value">{{ selectedOrder.order_number }}</span>
              </div>
              <div class="detail-row">
                <span class="label">商品名称：</span>
                <span class="value">{{ selectedOrder.item_name }}</span>
              </div>
              <div class="detail-row">
                <span class="label">数量：</span>
                <span class="value">{{ selectedOrder.quantity }}</span>
              </div>
              <div class="detail-row">
                <span class="label">总重量：</span>
                <span class="value">{{ selectedOrder.total_weight }} kg</span>
              </div>
              <div class="detail-row">
                <span class="label">总体积：</span>
                <span class="value">{{ selectedOrder.total_volume.toLocaleString() }} cm³</span>
              </div>
            </div>

            <div class="detail-section">
              <h4>尺寸信息</h4>
              <div class="detail-row">
                <span class="label">单体尺寸：</span>
                <span class="value">{{ selectedOrder.unit_length }} × {{ selectedOrder.unit_width }} × {{
                  selectedOrder.unit_height }} cm</span>
              </div>
            </div>

            <div class="detail-section">
              <h4>包装信息</h4>
              <div class="detail-row">
                <span class="label">包装类型：</span>
                <span class="value">{{ selectedOrder.packaging_type }}</span>
              </div>
              <div class="detail-row">
                <span class="label">温度控制：</span>
                <span class="value">{{ selectedOrder.temperature_control }}</span>
              </div>
              <div class="detail-row">
                <span class="label">易碎品：</span>
                <span class="value">{{ selectedOrder.is_fragile ? '是' : '否' }}</span>
              </div>
              <div class="detail-row">
                <span class="label">危险品：</span>
                <span class="value">{{ selectedOrder.is_hazardous ? '是' : '否' }}</span>
              </div>
            </div>

            <div class="detail-section">
              <h4>时间信息</h4>
              <div class="detail-row">
                <span class="label">创建时间：</span>
                <span class="value">{{ formatDate(selectedOrder.createdAt) }}</span>
              </div>
              <div class="detail-row" v-if="selectedOrder.lastModifiedAt">
                <span class="label">最后修改：</span>
                <span class="value">{{ formatDate(selectedOrder.lastModifiedAt) }}</span>
              </div>
              <div class="detail-row" v-if="selectedOrder.lastModifiedBy">
                <span class="label">修改人：</span>
                <span class="value">{{ selectedOrder.lastModifiedBy }}</span>
              </div>
            </div>

            <div class="detail-section" v-if="selectedOrder.notes">
              <h4>备注</h4>
              <div class="detail-row">
                <span class="value">{{ selectedOrder.notes }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 导出订单模态框 -->
    <div v-if="showExportModal" class="modal-overlay" @click="closeExportModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>导出订单</h3>
          <button class="modal-close" @click="closeExportModal">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="exportOrders">
            <div class="form-row">
              <div class="form-group">
                <label>订单号</label>
                <input v-model="exportParams.Order_number" type="text" placeholder="请输入订单号" class="form-control" />
              </div>
              <div class="form-group">
                <label>商品名称</label>
                <input v-model="exportParams.Item_name" type="text" placeholder="请输入商品名称" class="form-control" />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label>开始日期</label>
                <input v-model="exportParams.StartDate" type="date" class="form-control" />
              </div>
              <div class="form-group">
                <label>结束日期</label>
                <input v-model="exportParams.EndDate" type="date" class="form-control" />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label>文件名</label>
                <input v-model="exportParams.FileName" type="text" placeholder="请输入文件名（可选）" class="form-control" />
              </div>
            </div>

            <div class="modal-actions">
              <button type="button" class="btn btn-secondary" @click="closeExportModal">取消</button>
              <button type="submit" class="btn btn-success" :disabled="isExporting">
                <span v-if="isExporting">导出中...</span>
                <span v-else>导出</span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Toast 通知 -->
  <div v-if="toast.show" :class="['toast', `toast-${toast.type}`]">
    <div class="toast-content">
      <i :class="['toast-icon', getToastIcon()]"></i>
      <span class="toast-message">{{ toast.message }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { Order, OrderSearchParams } from '@/types/api'
import { orderApi, GATEWAY_URL } from '@/api/index'
import axios from 'axios'
import http from '@/utils/http'

// 响应式数据
const orders = ref<Order[]>([])

// Toast 通知
const toast = reactive({
  show: false,
  type: 'success', // success, error, warning, info
  message: ''
})
const pagination = reactive({
  PageIndex: 1,
  PageSize: 10,
  totalCount: 0,
  totalPage: 0
})

const searchParams = reactive<OrderSearchParams>({
  PageIndex: 1,
  PageSize: 10,
  Order_number: '',
  Item_name: ''
})

// 模态框状态
const showCreateModal = ref(false)
const showEditModal = ref(false)
const showViewModal = ref(false)
const showExportModal = ref(false)
const selectedOrder = ref<Order | null>(null)
const isExporting = ref(false)

// 订单表单
const orderForm = reactive({
  id: 0,
  order_number: '',
  item_name: '',
  quantity: 0,
  unit_length: 0,
  unit_width: 0,
  unit_height: 0,
  total_weight: 0,
  total_volume: 0,
  is_fragile: false,
  temperature_control: '',
  is_hazardous: false,
  packaging_type: '',
  notes: '',
  lastModifiedBy: '',
  CreatedBy: '王大锤'
})

// 导出参数
const exportParams = reactive({
  Order_number: '',
  Item_name: '',
  StartDate: '',
  EndDate: '',
  FileName: ''
})

// 生命周期
onMounted(() => {
  loadOrders()
})

// 方法
const loadOrders = async () => {
  try {
    // 方式1：使用封装的 orderApi（推荐，已配置好代理）
    const response = await orderApi.getOrderList(searchParams)

    console.log('=== 完整响应 ===', response)

    if (response.code === 200 && response.data) {
      const orderData = response.data as any
      console.log('=== orderData ===', orderData)

      orders.value = orderData.data
      pagination.totalCount = orderData.totalCount
      pagination.totalPage = orderData.totalPage
      pagination.PageIndex = searchParams.PageIndex

      console.log('=== orders.value ===', orders.value)
      console.log('=== pagination ===', pagination)
    } else {
      console.warn('响应失败:', response)
    }
  } catch (error) {
    console.error('Failed to load orders:', error)
  }
}

const searchOrders = () => {
  searchParams.PageIndex = 1
  pagination.PageIndex = 1
  loadOrders()
}

const resetSearch = () => {
  Object.assign(searchParams, {
    PageIndex: 1,
    PageSize: 10,
    Order_number: '',
    Item_name: ''
  })
  pagination.PageIndex = 1
  pagination.PageSize = 10
  loadOrders()
}

const changePage = (page: number) => {
  if (page >= 1 && page <= pagination.totalPage) {
    searchParams.PageIndex = page
    pagination.PageIndex = page
    loadOrders()
  }
}

const changePageSize = () => {
  searchParams.PageIndex = 1
  pagination.PageIndex = 1
  pagination.PageSize = searchParams.PageSize
  loadOrders()
}

const getPageNumbers = () => {
  const pages = []
  const start = Math.max(1, pagination.PageIndex - 2)
  const end = Math.min(pagination.totalPage, pagination.PageIndex + 2)

  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  return pages
}

const viewOrder = (order: Order) => {
  selectedOrder.value = order
  showViewModal.value = true
}

const editOrder = (order: Order) => {
  Object.assign(orderForm, {
    id: order.id,
    order_number: order.order_number,
    item_name: order.item_name,
    quantity: order.quantity,
    unit_length: order.unit_length,
    unit_width: order.unit_width,
    unit_height: order.unit_height,
    total_weight: order.total_weight,
    total_volume: order.total_volume,
    is_fragile: order.is_fragile,
    temperature_control: order.temperature_control,
    is_hazardous: order.is_hazardous,
    packaging_type: order.packaging_type,
    notes: order.notes,
    lastModifiedBy: '王大锤' // 使用默认值
  })
  showEditModal.value = true
}

const deleteOrder = async (order: Order) => {
  if (confirm(`确定要删除订单 ${order.order_number} 吗？`)) {
    try {
      // 使用 orderApi 删除
      const response = await orderApi.deleteOrder(order.id)
      console.log('Deleting order:', order.id)
      if (response.code === 200) {
        showToast('删除订单成功！', 'success')
      }
      loadOrders()
    } catch (error) {
      console.error('Failed to delete order:', error)
      showToast('删除订单失败，请重试！', 'error')
    }
  }
}

const submitOrder = async () => {
  try {
    if (showCreateModal.value) {
      // 创建订单 - 使用 orderApi
      // 确保必填字段不为空
      const createData = {
        order_number: orderForm.order_number,
        item_name: orderForm.item_name,
        quantity: orderForm.quantity,
        unit_length: orderForm.unit_length,
        unit_width: orderForm.unit_width,
        unit_height: orderForm.unit_height,
        total_weight: orderForm.total_weight,
        total_volume: orderForm.total_volume,
        is_fragile: orderForm.is_fragile,
        temperature_control: orderForm.temperature_control || '常温',  // 确保不为空
        is_hazardous: orderForm.is_hazardous,
        packaging_type: orderForm.packaging_type || '纸箱',  // 确保不为空
        notes: orderForm.notes || '无',  // 确保不为空
        CreatedBy: orderForm.CreatedBy
      }
      console.log('Creating order:', createData)
      const response = await orderApi.createOrder(createData)
      if (response.code === 200) {
        showToast('创建订单成功！', 'success')
      }
    } else {
      // 更新订单 - 只发送后端需要的字段
      // 确保必填字段不为空
      const updateData = {
        id: orderForm.id,
        order_number: orderForm.order_number,
        item_name: orderForm.item_name,
        quantity: orderForm.quantity,
        unit_length: orderForm.unit_length,
        unit_width: orderForm.unit_width,
        unit_height: orderForm.unit_height,
        total_weight: orderForm.total_weight,
        total_volume: orderForm.total_volume,
        is_fragile: orderForm.is_fragile,
        temperature_control: orderForm.temperature_control || '常温',  // 确保不为空
        is_hazardous: orderForm.is_hazardous,
        packaging_type: orderForm.packaging_type || '纸箱',  // 确保不为空
        notes: orderForm.notes || '无',  // 确保不为空
        lastModifiedBy: '王大锤'  // 只发送 lastModifiedBy，不发送 CreatedBy
      }
      console.log('Updating order:', updateData)
      const response = await orderApi.updateOrder(updateData)
      if (response.code === 200) {
        showToast('更新订单成功！', 'success')
      }
    }
    closeModal()
    loadOrders()
  } catch (error) {
    console.error('Failed to submit order:', error)
    showToast('操作失败，请重试！', 'error')
  }
}

const closeModal = () => {
  showCreateModal.value = false
  showEditModal.value = false
  showViewModal.value = false
  selectedOrder.value = null
  resetOrderForm()
}

const resetOrderForm = () => {
  Object.assign(orderForm, {
    id: 0,
    order_number: '',
    item_name: '',
    quantity: 0,
    unit_length: 0,
    unit_width: 0,
    unit_height: 0,
    total_weight: 0,
    total_volume: 0,
    is_fragile: false,
    temperature_control: '常温',  // 提供默认值而不是空字符串
    is_hazardous: false,
    packaging_type: '纸箱',  // 提供默认值而不是空字符串
    notes: '无',  // 提供默认值而不是空字符串
    lastModifiedBy: '王大锤',
    CreatedBy: '王大锤'
  })
}

// 工具函数
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

// Toast 通知函数
const showToast = (message: string, type: 'success' | 'error' | 'warning' | 'info' = 'success') => {
  toast.message = message
  toast.type = type
  toast.show = true

  setTimeout(() => {
    toast.show = false
  }, 3000)
}

const getToastIcon = () => {
  switch (toast.type) {
    case 'success': return 'icon-check'
    case 'error': return 'icon-error'
    case 'warning': return 'icon-warning'
    case 'info': return 'icon-info'
    default: return 'icon-check'
  }
}

// 导出相关方法
const closeExportModal = () => {
  showExportModal.value = false
  resetExportParams()
}

const resetExportParams = () => {
  Object.assign(exportParams, {
    Order_number: '',
    Item_name: '',
    StartDate: '',
    EndDate: '',
    FileName: ''
  })
}

const exportOrders = async () => {
  try {
    isExporting.value = true

    // 过滤空值参数
    const params: any = {}
    if (exportParams.Order_number) params.Order_number = exportParams.Order_number
    if (exportParams.Item_name) params.Item_name = exportParams.Item_name
    if (exportParams.StartDate) params.StartDate = exportParams.StartDate
    if (exportParams.EndDate) params.EndDate = exportParams.EndDate
    if (exportParams.FileName) params.FileName = exportParams.FileName

    // 使用 orderApi 导出
    const response = await orderApi.exportOrders(params)

    // 创建下载链接
    const blob = new Blob([response])
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url

    // 设置文件名
    const fileName = exportParams.FileName || `订单导出_${new Date().toISOString().split('T')[0]}.xlsx`
    link.download = fileName

    // 触发下载
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)

    showToast('订单导出成功！', 'success')
    closeExportModal()
  } catch (error) {
    console.error('Failed to export orders:', error)
    showToast('导出失败，请重试！', 'error')
  } finally {
    isExporting.value = false
  }
}
</script>

<style scoped>
.order-management {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
  margin: 0;
  color: #333;
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: end;
}

.form-group {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.form-group label {
  margin-bottom: 5px;
  font-weight: 500;
  color: #555;
}

.form-control {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-control:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.date-separator {
  margin: 0 10px;
  color: #666;
}

.form-actions {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #545b62;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-success:hover {
  background: #218838;
}

.btn-success:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.btn-info {
  background: #17a2b8;
  color: white;
}

.btn-warning {
  background: #ffc107;
  color: #212529;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

.table-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #555;
}

.data-table tbody tr:hover {
  background: #f8f9fa;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-pending {
  background: #fff3cd;
  color: #856404;
}

.status-assigned {
  background: #d4edda;
  color: #155724;
}

.status-in_transit {
  background: #cce5ff;
  color: #004085;
}

.status-delivered {
  background: #d1ecf1;
  color: #0c5460;
}

.status-cancelled {
  background: #f8d7da;
  color: #721c24;
}

.actions {
  display: flex;
  gap: 5px;
}

.pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-top: 1px solid #eee;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-size-selector label {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.page-size-select {
  width: 80px;
  padding: 4px 8px;
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-numbers {
  display: flex;
  gap: 5px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.modal-body {
  padding: 20px;
}

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.form-row .form-group {
  flex: 1;
}

.address-section {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.address-section h4 {
  margin: 0 0 15px 0;
  color: #555;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.order-details {
  max-width: 600px;
}

.detail-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.detail-section:last-child {
  border-bottom: none;
}

.detail-section h4 {
  margin: 0 0 10px 0;
  color: #555;
}

.detail-row {
  display: flex;
  margin-bottom: 8px;
}

.detail-row .label {
  min-width: 100px;
  font-weight: 500;
  color: #666;
}

.detail-row .value {
  flex: 1;
  color: #333;
}

.icon-plus::before {
  content: '+';
  margin-right: 5px;
}

.icon-export::before {
  content: '⬇';
  margin-right: 5px;
}

/* Toast 通知样式 */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  min-width: 300px;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: slideInRight 0.3s ease-out;
  backdrop-filter: blur(10px);
}

.toast-success {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border-left: 4px solid #2E7D32;
}

.toast-error {
  background: linear-gradient(135deg, #f44336, #d32f2f);
  color: white;
  border-left: 4px solid #C62828;
}

.toast-warning {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: white;
  border-left: 4px solid #E65100;
}

.toast-info {
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: white;
  border-left: 4px solid #0D47A1;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-icon {
  font-size: 18px;
  font-weight: bold;
}

.toast-message {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

/* 图标样式 */
.icon-check::before {
  content: '✓';
}

.icon-error::before {
  content: '✕';
}

.icon-warning::before {
  content: '⚠';
}

.icon-info::before {
  content: 'ℹ';
}

/* 动画效果 */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .toast {
    left: 20px;
    right: 20px;
    min-width: auto;
  }
}
</style>
